<template>
	<view  class="app-tabber-home" :style="[pageStyle,AppSkinVar]" >
		<e-skeleton :show="skeletonShow">
			<view class="e-p-20">
				<e-skeleton-item variant="swiper"></e-skeleton-item>
				<view class="e-p-t-20">
					<e-skeleton-item variant="menu"></e-skeleton-item>
				</view>
				<view class="e-p-t-20">
					<e-skeleton-item variant="waterfall"></e-skeleton-item>
				</view>
				<e-skeleton-item variant="tabbar"></e-skeleton-item>
			</view>
		</e-skeleton>
		<view  v-show="!skeletonShow">
			<view v-for="(item,index) in componentsList" :key="item.key">
				<!-- 商品类组件 -->
				<!-- 页面最底部的组件才开始监听页面触底事件 -->
				<i-goods-group  v-if="item.components === 'goodsGroup'" :option="item.option" />
				<i-whole-goods :hasReachBottom="index === (componentsList.length-1)" v-if="item.components === 'wholeGoods'" :option="item.option" />
				<i-goods-tab v-if="item.components === 'goodsTab'" :option="item.option" />
				<i-goods-recommend v-if="item.components === 'goodsRecommend'" :option="item.option" />
				<i-goods-like v-if="item.components === 'goodsLike'" :option="item.option" />
				<i-boutique-recommend v-if="item.components === 'boutiqueRecommend'" :option="item.option" />
				<i-goods-banner v-if="item.components === 'goodsBanner'" :option="item.option" />
				<!-- <i-gift-show v-if="item.components === 'giftShow'" :option="item.option" /> -->
				<!-- 图文类组件 -->
				<i-notice v-if="item.components === 'notice'" :option="item.option" />
				<i-search v-if="item.components === 'search'" :option="item.option" hasCustomNavigation />
				<i-img-banner v-if="item.components === 'imgBanner'" :option="item.option" @pageBackgroundImageChange="setPageBackgroundImage" />
				<i-search-banner v-if="item.components === 'searchBanner'" :option="item.option" />
				<i-image v-if="item.components === 'image'" :option="item.option" />
				<i-hot v-if="item.components === 'hot'" :option="item.option" />
				<i-image-nav v-if="item.components === 'imageNav'" :option="item.option" />
				<i-magic-cube v-if="item.components === 'magicCube'" :option="item.option" />
				<i-list-nav v-if="item.components === 'listNav'" :option="item.option" />
				<i-blank v-if="item.components === 'blank'" :option="item.option" />
				<i-button-group v-if="item.components === 'buttonGroup'" :option="item.option" />
				<i-fixed-button v-if="item.components === 'fixedButton'" :option="item.option" />
				<i-porcelain v-if="item.components === 'porcelain'" :option="item.option" />
				<i-video v-if="item.components === 'video'" :option="item.option" />
				<i-my-rich-text  v-if="item.components === 'richText' " :option="item.option" />
				<i-img-advert v-if="item.components === 'imgAdvert' " :option="item.option"> </i-img-advert>
				<i-classify-tabs v-if="item.components === 'classifyTabs' " :option="item.option"></i-classify-tabs>
				<i-information  v-if="item.components === 'information' " :option="item.option" ></i-information>
				<!-- 其他组件 -->
				<i-business-list v-if="item.components === 'businessList' " :option="item.option" />
				<i-order-reminder  v-if="item.components === 'orderReminder' " :option="item.option" />
				<!-- 营销类组件 -->
				<i-seckill  v-if="item.components === 'seckill' " :option="item.option" />
				<i-collage  v-if="item.components === 'collage' " :option="item.option" />
				<i-newcomers  v-if="item.components === 'newComers' && newUser " :option="item.option" ></i-newcomers>
			</view>
				
			
			<technical-support></technical-support>
		</view>
		<!-- 弹窗广告组件 -->
		<i-ad-dialog :option="advertisingSetting" v-if="!skeletonShow&&advertisingSetting.openAd" />
	</view>

	
</template>

<script lang="ts">
	import {
		ref,
		reactive,
		nextTick,
		provide,
		defineComponent
	} from 'vue'
	import layoutMainPageMixIn from '../utils/layoutMainPageMixIn'
	import {
		useTabbar
	} from '../utils/customTabbar'
	import {
		useLayoutMainPage
	} from '../utils/hooks'
	import {
		useCurrentInstance
	} from '@/common/hooks'
	import {
		useUser
	} from '@/common/stores'
	import {
		storeToRefs
	} from 'pinia'
	import {homePageContextKey} from '@/token'
	
	export default defineComponent({
		mixins: [layoutMainPageMixIn],
		props: {
			index: {
			type: String,
			required: true
		}
		},
		emit: ['closeSkeleton','endRefresh'],
		setup(props, {
			emit
		}) {

			const ctx = useCurrentInstance()
			const userStore = useUser()
			
			const {
				newUser
			} = storeToRefs(userStore)


			const {
				componentsList,
				pageStyle,
				advertisingSetting,
				setPageBackgroundImage,
				getPageInfo
			} = useLayoutMainPage(ctx,true)

			const {
				onShow,
				onPullDownRefresh, onReachBottom 
			} = useTabbar(props.index )
			
			const skeletonShow = ref(true)
			const refresherEnabled = ref(true)
			const closeSkeleton = () => {
				refresherEnabled.value = false
				setTimeout(() => {
					nextTick(() => {
						skeletonShow.value = false
					})
					
				},600)
				setTimeout(() => {
					refresherEnabled.value = true
					
				},2000)
			}
			getPageInfo(1).then(() => {
				closeSkeleton()
			})

			const checkNewUser = () => {
				// 如果是新人，重新获取用户信息
				if (newUser.value) {
					userStore.getUserInfo()
				}
			}
			checkNewUser()
			
			
			const handlePullDownRefresh = () => {
				skeletonShow.value = true
				
				getPageInfo(1,true).finally(() => {
					
					emit('endRefresh');
					nextTick(() => {
						closeSkeleton()
					})
					
					
				})
			}
			const handleReachBottom = () => {
				uni.$emit('onHomePageReachBottom')
			}
			onShow(() => {
				checkNewUser()
			})
			onPullDownRefresh(() => {
				handlePullDownRefresh()
			})
			onReachBottom(() => {
				handleReachBottom()
			})
			
			provide(homePageContextKey, reactive({
				contextId: 'home'
			}))
			
			
			

			return {
				skeletonShow,
				refresherEnabled,
				newUser,
				componentsList,
				pageStyle,
				setPageBackgroundImage,
				advertisingSetting
			}
		}
	})
</script>


<style lang="scss" scoped>
	@include appBem_b(tabber-home){
		
	}
</style>
